<template>
  <div style="width:100%;height:100%">
    <v-chart :options="option" :initOptions="initOptions" :theme="theme" autoresize />
  </div>
</template>
<script>

export default {
  name: 'chart',
  props: ['index'],
  mounted () {
  },
  data () {
    return {
      initOptions: { renderer: 'canvas' },
      theme: 'default'
    }
  },
  methods: {
  },
  computed: {
    insideSlideArray () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent
    },
    insideArrayIndex () {
      return this.insideSlideArray.indexOf(this.insideSlideArray.filter((currentValue) => {
        return currentValue.i === this.index
      })[0])
    },
    getDetail () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.insideArrayIndex].itemContent.detail
    },
    option () {
      return {
        animation: this.getDetail.animation,
        backgroundColor: this.getDetail.backgroundColor[this.getDetail.backgroundColor.option],
        title: this.getDetail.title,
        tooltip: {
          formatter: '{b}: {c}'
        },
        visualMap: this.getDetail.visualMapC,
        series: {
          type: 'map',
          map: 'china',
          label: {
            show: true
          },
          roam: this.getDetail.simpleMap.roam,
          left: this.getDetail.simpleMap.left,
          right: this.getDetail.simpleMap.right,
          bottom: this.getDetail.simpleMap.bottom,
          top: this.getDetail.simpleMap.top,
          itemStyle: this.getDetail.simpleMap.itemStyle,
          data: this.getDetail.sheetData.map(item => {
            return { name: item[0], value: item[1] }
          })
        }
      }
    }
  }
}
</script>
<style scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
<style>

</style>
